```jsx
import * as qrCode from "@zag-js/qr-code"
import { normalizeProps, useMachine } from "@zag-js/solid"
import { createMemo, createUniqueId } from "solid-js"

export function QRCode() {
  const service = useMachine(qrCode.machine, {
    id: createUniqueId(),
    value: "https://github.com/chakra-ui",
  })

  const api = createMemo(() => qrCode.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      <svg {...api().getFrameProps()}>
        <path {...api().getPatternProps()} />
      </svg>
      <div {...api().getOverlayProps()}>
        <img
          src="https://avatars.githubusercontent.com/u/54212428?s=88&v=4"
          alt=""
        />
      </div>
    </div>
  )
}
```
